<template>
  <div class="floors">
    <!-- floor1 -->
    <div class="floors-item">
      <h2 v-if="homeData.floorName">{{homeData.floorName.floor1}}</h2>

      <div class="content">
        <ul class="clearFix">
          <li v-for="item of homeData.floor1" :key="item.goodsId">
            <router-link :to="{path:'/details',query:{id:item.goodsId}}">
              <van-image class="image" :src="$filterImage(item.image)" lazy-load>
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
            </router-link>
          </li>
        </ul>
      </div>
    </div>

    <!-- floor2 -->
    <div class="floors-item">
      <h2 v-if="homeData.floorName">{{homeData.floorName.floor2}}</h2>

      <div class="content">
        <ul class="clearFix">
          <li v-for="item of homeData.floor2" :key="item.goodsId">
            <router-link :to="{path:'/details',query:{id:item.goodsId}}">
              <van-image class="image" :src="$filterImage(item.image)" lazy-load>
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
            </router-link>
          </li>
        </ul>
      </div>
    </div>

    <!-- floor3 -->
    <div class="floors-item">
      <h2 v-if="homeData.floorName">{{homeData.floorName.floor3}}</h2>

      <div class="content">
        <ul class="clearFix">
          <li v-for="item of homeData.floor3" :key="item.goodsId">
            <router-link :to="{path:'/details',query:{id:item.goodsId}}">
              <van-image class="image" :src="$filterImage(item.image)" lazy-load>
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            homeData:{}
        }
    },
    created(){
        this.$eventBus.$on("getIndexInfo",(res)=>{
            this.homeData = res
        })
    }
};
</script>

<style lang="scss">
    @import "@/style/home/floors"
</style>